<template>
    <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
    <!--<el-tabs v-model="activepart" type="card" @tab-click="handleClick">-->
    <!--<el-tab-pane label="小时流量" name="myChart">-->
    <!--<div>-->
    <!--<div id="myChart" :style="{width: '1000px', height: '300px'}"></div>-->
    <!--</div>-->
    <!--</el-tab-pane>-->
    <!--<el-tab-pane label="天流量" name="myChart2">-->
    <!--<div>-->
    <!--<div id="myChart2" :style="{width: '1000px', height: '300px'}"></div>-->
    <!--</div>-->
    <!--</el-tab-pane>-->
    <!--<el-tab-pane label="月流量" name="myChart3">-->
    <!--<div>-->
    <!--<div id="myChart3" :style="{width: '1000px', height: '300px'}"></div>-->
    <!--</div>-->
    <!--</el-tab-pane>-->
    <!--</el-tabs>-->
</template>
<style>
    #myChart{
        background: #232343;
    }
</style>

<script>
    export default {
        name: "DataCount",
        data() {
            return {
                myChart: {},
                xdatas: [],
                ydatas: [],
                areasID: [],
                activepart: 'myChart',
                defOption:{
                    title: {
                        text: '本周人流量',
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                            axisTick: {
                                alignWithLabel: true
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff' //更改坐标轴颜色
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'   //这里用参数代替了
                                }
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'   //这里用参数代替了
                                }
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#fff' //更改坐标轴颜色
                                }
                            }

                        }
                    ],
                    series: [
                        {
                            name: '访问量',
                            type: 'bar',
                            barWidth: '60%',
                            data: [10, 52, 200, 334, 390, 330, 220]
                        }
                    ]
                },
                optionOur
        :
            {
                xAxis:[{}],
                    series
            :
                [
                    {
                        data: []
                    },
                ]

            }
        , // 按照小时
            optionDay: {
                xAxis:[{}],
                    series
            :
                [
                    {
                        data: []
                    },
                ]
            }
        , //按照天
            optionMonth: {
                xAxis:[{}],
                    series
            :
                [
                    {
                        data: []
                    },
                ]
            } //按照月
        }
    }
    ,
    mounted()
    {
        this.getecharData()
    }
    ,
    methods: {
        getecharData()
        {
            let _this = this;
            this.drawLine();
            this.$api.GetAllAreas({onlyArea: true}).then((res) => {
                res.data[0].areaList.forEach(item => {
                    _this.areasID.push(item.id);
                })
                this.ByHours()
            })
        }
    ,
        ByHours()
        {
            let nowday = this.$moment().format('YYYY-MM-DD');
            console.log( )
            this.$api.reportWeekDayCount({
                areaIds: this.areasID
            }).then((res) => {
                let hourData = []
                let arr = []
                res.data.forEach(item => {
                    hourData.push(item.count);
                    arr.push( '星期'+this.toChinesNum(this.$moment(item.time).isoWeekday()))
                })
                this.optionOur.xAxis[0].data = arr
                this.optionOur.series[0].data = hourData
                console.log(this.optionOur)
                console.log(this.defOption)
                // this.myChart.setOption(JSON.parse(JSON.stringify(this.optionOur)))
                this.myChart.setOption(this.optionOur)
            }).catch((err) => {
                console.log(err)
            })
        }
    ,
        ByDays()
        {
            let nowday = this.$moment().format('YYYY-MM');
            let lastMonth = this.$moment().endOf('month').format("YYYY-MM-DD")
            let endmonthDay = this.$moment().endOf('month').format("DD");
            let arr = []
            for (let i = 1; i <= endmonthDay; i++) {
                arr.push(i + '号')
            }
            this.optionDay.xAxis[0].data = arr
            this.$api.GetDatasByDays({
                areaIds: this.areasID,
                startTime: nowday + '-01',
                endTime: lastMonth
            }).then((res) => {
                let hourData = []
                res.data.forEach(item => {
                    hourData.push(item.count);
                })
                this.optionDay.series[0].data = hourData
            }).catch((err) => {
                console.log(err)
            })
        }
    ,
        ByMounths()
        {

            let nowday = this.$moment().format('YYYY');
            let arr = []
            for (let i = 1; i <= 12; i++) {
                arr.push(i + '月')
            }
            this.optionMonth.xAxis[0].data = arr
            this.$api.GetDatasByMounths({
                areaIds: this.areasID,
                startTime: nowday + '-01',
                endTime: nowday + '-12'
            }).then((res) => {
                let hourData = []
                res.data.forEach(item => {
                    hourData.push(item.count);
                })
                this.optionMonth.series[0].data = hourData
            }).catch((err) => {
                console.log(err)
            })
        },
        toChinesNum(num){
        let changeNum = ['零', '一', '二', '三', '四', '五', '六', '日', '八', '九']; //changeNum[0] = "零"
        let unit = ["", "十", "百", "千", "万"];
        num = parseInt(num);
        let getWan = (temp) => {
            let strArr = temp.toString().split("").reverse();
            let newNum = "";
            for (var i = 0; i < strArr.length; i++) {
                newNum = (i == 0 && strArr[i] == 0 ? "" : (i > 0 && strArr[i] == 0 && strArr[i - 1] == 0 ? "" : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i]))) + newNum;
            }
            return newNum;
        }
        let overWan = Math.floor(num / 10000);
        let noWan = num % 10000;
        if (noWan.toString().length < 4) noWan = "0" + noWan;
        return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
    }
    ,
        drawLine()
        {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            this.myChart = myChart;
            // 绘制图表
            myChart.setOption(this.defOption);
        }
    }
    }
</script>
